<template>
  <main class="main_box">
    <div class="login-box">
      <div class="title_box">
        <div class="left"></div>
        <div class="right">
          <div class="title">WELCOME</div>
          <p>红星智慧社区管理系统后台</p>
        </div>
      </div>
      <label class="user_name_box">
        <img src="https://cdn3.axureshop.com/demo/2033334/images/登录/u3509.svg" />
        <input type="text" v-model="userInfor.uphone" @blur="validationInput(userInfor.uphone, 0)"
          placeholder="用户名或手机号" />
      </label>
      <label class="password_name_box">
        <img src="https://cdn3.axureshop.com/demo/2033334/images/登录/u3513.svg" />
        <input type="password" v-model="userInfor.upass" @blur="validationInput(userInfor.upass, 1)"
          @keydown="enter_login" placeholder="密码" />
      </label>
      <div class="login_state_box">
        <div class="left">
          <a-checkbox @change="onChangeState" :defaultChecked="auto_login">自动登录</a-checkbox>
        </div>
        <span class="right">忘记密码？</span>
      </div>
      <div @click="juHome" class="login_btn">登录</div>
    </div>
  </main>
</template>

<script>
import { loginFn, tokenFn } from "@/config/api";

export default {

  name: "LoginVue",

  data() {
    return {
      userInfor: {
        uphone: "",
        upass: "",
      },
      //自动登录状态  ----从本地获取值为空是 取后面的 true
      auto_login: window.localStorage.getItem("auto_login")
        ? JSON.parse(window.localStorage.getItem("auto_login"))
        : undefined || true,
    };
  },
  //计算属性
  component: {},
  //挂载前
  mounted() {
    this.autoLogin(); //调用自动登录的方法
  },

  //方法
  methods: {
    //token 自动登录
    async autoLogin() {
      if (!this.auto_login) return; //判断是否自动登录
      const token = window.localStorage.getItem("token"); //获取token

      if (!token) return; //验证是否有token 没有后面代码不执行

      const {
        data: { code, data },
      } = await tokenFn({ token }); //发送验证token 验证自动登录

      let { message, steta } = data; //解构自动登录返回的值

      if (code != 200) return; // 判断请求是否成功

      //判断验证结果 成功
      if (steta) {
        this.$message.success(message); //消息提示成功
        this.$router.replace("/communitylist"); //跳转至首页
        //错误
      } else {
        this.$message.error(message); //错误消息提示
        window.localStorage.removeItem("token"); //删除过期token
      }
    },

    //密码框 回车登录
    enter_login(e) {
      if (e.keyCode == 13) this.juHome(); //判断是否按下回车键（键码为13） 是就执行登录功能函数
    },

    //登录提交登录功能函数
    async juHome() {
      if (!this.validationInput(this.userInfor.uphone, 0)) return; // 调用验证方法验证账号 方法会返回一个状态（布尔值）

      if (!this.validationInput(this.userInfor.upass, 1)) return; // 调用验证方法验证密码 方法会返回一个状态（布尔值）

      const { data: res } = await loginFn(this.userInfor); //发送登录验证

      const { message, token, userInfo } = res.data; // 解构 登录返回结果

      if (message == "登录成功") {
        //登录消息为成功时执行
        window.localStorage.setItem("token", token); //存储token
        window.localStorage.setItem("userInfo", JSON.stringify(userInfo)); //存储用户信息
        this.$message.success(message); //消息提示
        if (!this.auto_login) window.localStorage.setItem("auto_login", false); //本地存储自动登录状态
        this.$router.replace("/communitylist"); //跳转至首页
      } else {
        this.$message.error(message); //消息不为登录成功  错误消息提示
      }
    },
    //验证账号密码 功能函数
    validationInput(val, message) {
      // val：验证的对象 ，message：类型账号还是密码
      let newVal = val.trim(); // 去除 验证的对象 前后空格

      // 验证的对象值为为空时
      if (newVal == "") {
        this.$message.error(switchVav(message) + "不能为空！"); //消息提示
        return false;
        // 类型为账号 并且 验证的对象值少于两位
      } else if (!message && newVal.length < 2) {
        this.$message.error(switchVav(message) + "不能少于两位！"); //消息提示
        return false; //返回的状态
        // 类型为密码 并且 验证的对象值少于六位
      } else if (message && newVal.length < 6) {
        this.$message.error(switchVav(message) + "不能少于六位！"); //消息提示
        return false; //返回的状态
      } else {
        return true; //返回的状态
      }

      //判断账号还是密码
      function switchVav(key) {
        switch (key) {
          case 0:
            return "账号";
          case 1:
            return "密码";
          default:
            break;
        }
      }
    },

    //自动登录状态
    onChangeState(e) {
      this.auto_login = e.target.checked; // 是否自动登录的状态值

      window.localStorage.setItem("auto_login", e.target.checked); //本地存储自动登录状态
    },
  },
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.main_box {
  width: 100vw;
  height: 100vh;
  background: url("https://s1.ax1x.com/2022/10/22/xgMyh4.jpg") no-repeat center center;
  background-size: cover;
  position: relative;

  .login-box {
    width: 339px;
    height: 349px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;

    .title_box {
      display: flex;
      margin-bottom: 50px;

      .left {
        width: 5px;
        height: 73px;
        background-color: #fff;
        margin-right: 20px;
      }

      .right {
        flex: 1;
        height: 73px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;

        .title {
          font-size: 32px;
        }

        p {
          font-size: 24px;
        }
      }
    }

    &>label {
      margin-bottom: 25px;
    }

    .user_name_box,
    .password_name_box {
      height: 40px;
      background-color: #fff;
      display: flex;
      align-items: center;

      img {
        width: 13px;
        height: 16px;
        margin: 0 10px 0 20px;
      }

      input {
        flex: 1;
        outline: none;
        border: none;
      }
    }

    .login_state_box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 25px;
      font-size: 14px;
      color: #fff;

      .left {
        .ant-checkbox-wrapper {
          font-size: 14px;
          color: #fff;
        }
      }
    }

    .login_btn {
      height: 40px;
      background-color: #1890ff;
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
    }
  }
}
</style>
